<template>
  <view class="ranklist">
    <view class="tab">
      <text class="title">我的下级经纪人</text>
      <view class="line"></view>
    </view>
    <s-pull-scroll
      ref="pullScroll"
      :back-top="true"
      :top="100"
      :bottom="0"
      :pullDown="pullDown"
      :pullUp="loadData"
      :preventTouchmove="true"
      :backTop="true"
    >
      <view class="phblb">
        <view class="wrap" v-if="hasData == true">
          <view class="phb-item" v-for="item in ranklist" :key="item.headimage">
            <!-- 排序 -->
            <text class="index">{{item.rank_id}}</text>
            <!-- 头像 -->
            <image class="avatar" :src="item.headimage" mode />
            <!-- 昵称 -->
            <text class="nickname">{{ item.nickname }}</text>
            <!-- 提现金额 -->
            <text class="money">
              <text
                class="getmoney"
                style="color: red;margin-right: 10rpx;font-weight: bold;"
              >{{ item.money }}</text>元
            </text>
          </view>
        </view>
        <view class="nothing" v-else>暂无数据</view>
      </view>
    </s-pull-scroll>
  </view>
</template>

<script>
import sPullScroll from "../s-pull-scroll/index";
export default {
  components: {
    sPullScroll
  },
  data() {
    return {
      hasData: false,
      ranklist: [],
      page: 1,
      // 保存上一次请求的数组
      prelist: [],
      // 是否有下一页数据
      has_next: 0
    };
  },
  onShow() {
    this.getDownline();
  },
  methods: {
    getDownline() {
      this.$http({
        url: `/api/user/MyBroker?page=${this.page}`
      }).then(res => {
        if (res) {
          this.hasData = true;
        }
        this.ranklist = res.data.list;
        this.prelist = res.data.list;
        this.has_next = res.data.has_next;
      });
    },
    // refresh() {
    //   this.$nextTick(() => {
    //     this.$refs.pullScroll.refresh();
    //   });
    // },
    pullDown(pullScroll) {
      if (this.page !== 1) {
        this.page = this.page - 1;
        setTimeout(() => {}, 1000);
        this.getDownline();
        pullScroll.success();
      } else {
        pullScroll.success();
      }
    },
    loadData(pullScroll) {
      if (this.has_next !== 0) {
        // uni.showToast({
        //   title: "加载中",
        //   icon: "loading"
        // });
        this.page = this.page + 1;
        setTimeout(() => {
          this.getDownline();
          pullScroll.success();
        }, 1000);
      } else {
        pullScroll.finish();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.ranklist {
  padding: 0 10px;
  .tab {
    // width: 100rpx;
    height: 100rpx;
    text-indent: 20rpx;
    .title {
      font-weight: bold;
      line-height: 100rpx;
      font-size: 40rpx;
    }
    .line {
      width: 20%;
      height: 5rpx;
      background-color: red;
      margin-left: 70rpx;
    }
  }
  .phblb {
    margin-top: 10rpx;
    .phb-item {
      border-bottom: 1rpx solid #cccccc;
      position: relative;
      line-height: 130rpx;
      .avatar {
        width: 100rpx;
        height: 100rpx;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50rpx;
        transform: translateY(-50%);
      }
      .nickname {
        margin-left: 180rpx;
        font-weight: bold;
      }
      .money {
        float: right;
        margin-right: 50px;
      }
    }
  }
}
</style>
